<template>
  <div class="settings-container">
    <el-card>
      <el-tabs v-model="activeName">
        <el-tab-pane label="角色管理" name="first">
          <div>
            <el-button type="primary" @click="addRole">添加角色</el-button>
            <!-- 表格 -->
            <el-table
              :data="$store.state.settings.tableData"
              border
              style="width: 100%; margin: 20px 0"
              :default-sort="{ prop: 'date', order: 'descending' }"
            >
              <el-table-column
                fixed
                type="index"
                prop="date"
                label="序号"
                width="150"
              />
              <el-table-column
                sortable
                prop="name"
                label="角色名"
                width="150"
              />
              <el-table-column sortable prop="description" label="描述" />
              <el-table-column fixed="right" label="操作" width="250">
                <template slot-scope="scope">
                  <el-button
                    size="small"
                    type="primary"
                    @click="hAssign(scope.row.id)"
                  >分配权限</el-button>
                  <el-button
                    type="success"
                    size="small"
                    @click="editRole(scope.row.id)"
                  >修改</el-button>
                  <el-button
                    type="danger"
                    size="small"
                    @click="delRole(scope.row.id)"
                  >删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <role-dia :params-obj="paramsObj" :role-form.sync="roleForm" />
            <!-- 分页 -->

            <el-pagination
              layout="slot,sizes,prev, pager, next,jumper"
              :total="this.$store.state.settings.total"
              :page-size="paramsObj.pagesize"
              :page-sizes="[1, 3, 5, 10]"
              :current-page.sync="paramsObj.page"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            /><span
              class="xxx"
            >共{{ this.$store.state.settings.total }}条</span>
          </div>
        </el-tab-pane>
        <el-tab-pane label="公司信息" name="second">
          <el-form
            ref="form"
            :model="$store.state.settings.companyfForm"
            label-width="80px"
          >
            <el-form-item label="企业名称">
              <el-input
                v-model="$store.state.settings.companyfForm.name"
                disabled
              />
            </el-form-item>
            <el-form-item label="公司地址">
              <el-input
                v-model="$store.state.settings.companyfForm.companyAddress"
                disabled
              />
            </el-form-item>
            <el-form-item label="公司电话">
              <el-input
                v-model="$store.state.settings.companyfForm.companyPhone"
                disabled
              />
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input
                v-model="$store.state.settings.companyfForm.mailbox"
                disabled
              />
            </el-form-item>
            <el-form-item label="备注">
              <el-input
                v-model="$store.state.settings.companyfForm.remarks"
                disabled
              />
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <!-- 分配权限的弹层 -->
    <el-dialog
      title="分配权限(一级为路由页面查看权限-二级为按钮操作权限)"
      :visible.sync="showDialogAssign"
    >
      <assign-permission
        v-if="showDialogAssign"
        :role-id="roleId"
        @close="showDialogAssign = false"
      />
    </el-dialog>
  </div>
</template>
<script>
import roleDia from './components/roleDia.vue'
import assignPermission from './assignPermission'
import { delRoleById } from '@/api/settings'
export default {
  name: '',
  components: {
    roleDia,
    assignPermission
  },
  data() {
    return {
      activeName: 'first',
      paramsObj: {
        page: 1,
        pagesize: 5
      },
      roleForm: {
        name: '',
        description: ''
      },
      showDialogAssign: false, // 分配权限对话框
      roleId: ''
    }
  },
  computed: {},
  created() {
    this.$store.dispatch(
      'settings/getCompanyInfo',
      this.$store.state.user.userInfo.companyId
    )
    this.$store.dispatch('settings/getRoles', this.paramsObj)
  },
  methods: {
    hAssign(id) {
      this.showDialogAssign = true
      this.roleId = id
      console.log(id, 123123)
    },
    // handleClick(row) {
    //   console.log(row)
    // }
    addRole() {
      this.roleForm = {
        name: '',
        description: ''
      }
      this.$store.commit('settings/flag', true)
      this.$store.commit('settings/changeDialog')
    },
    async delRole(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          await delRoleById(id)
          // 确认按钮
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          //  成功后 刷新页面
          this.$store.dispatch('settings/getRoles', this.paramsObj)
        })
        .catch(() => {
          // 点击取消按钮
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    async editRole(id) {
      this.roleForm = {
        name: '',
        description: ''
      }
      await this.$store.dispatch('settings/getRolesById', id)
      this.roleForm = this.$store.state.settings.roleInfo
      this.$store.commit('settings/flag', false)
      this.$store.commit('settings/changeDialog')
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`)
      this.paramsObj.pagesize = val
      this.$store.dispatch('settings/getRoles', this.paramsObj)
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`)
      this.paramsObj.page = val
      this.$store.dispatch('settings/getRoles', this.paramsObj)
    }
  }
}
</script>

<style lang="scss" scoped>
.settings-container {
  .el-form {
    width: 500px;
    margin-left: 100px;
  }
  .el-pagination {
    text-align: right;
    line-height: 28px;
  }
}
.xxx {
  position: absolute;
  bottom: 8px;
  right: 380px;
}
</style>
